<template>
  <div class="wrap">
    <div class="header-menu"></div>
    <el-container class="container">
      <el-header class="header">{{ header_text }}</el-header>
      <el-container>
        <el-aside class="aside">
          <el-menu default-active="1">
            <el-menu-item v-for="item in chat_group" :key="item.id" :index="item.id" :disabled="item.disable"
              @click="getHeaderText(item, item.label)">
              <span>{{ item.label }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <div class="chat-space">
            <!-- 聊天内容 -->
            <ChatLine v-for="item, i in chat_content" :key="i" :userid="item.userid" :time="item.time"
              :content="item.content" />
          </div>
          <div class="writing-space">
            <div class="writing-tools">
              Tools
            </div>
            <el-input v-model="textarea" class="writing-area" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
              resize="none" />
            <div class="writing-button">
              <el-button @click="clear">清空</el-button>
              <el-button type="primary" @click="send">发送</el-button>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import ChatLine from '../components/ChatLine.vue';
import { ref } from 'vue';
import { io } from 'socket.io-client'
import { useStore } from '../stores';
import { getCurrentTime } from '../features/DateTools'
import { getchat, recordingChat } from '../api/api';
import { ElNotification } from 'element-plus';
import { v4 as uuidv4 } from 'uuid';

// 聊天群组
const chat_group = ref([
  {
    id: '1',
    label: 'Group 1',
    disable: false
  }, {
    id: '2',
    label: 'Group 2',
    disable: true
  }, {
    id: '3',
    label: 'Group 3',
    disable: true
  }, {
    id: '4',
    label: 'Group 4',
    disable: true
  }
])
// 输入框
const textarea = ref(``)

// 大标题
const header_text = ref('')
// 默认第一个
header_text.value = chat_group.value[0].label
// 获取大标题
const getHeaderText = (item, label) => {
  header_text.value = label
}

// 聊天信息
const chat_content = ref([])
// 从服务器拉取聊天信息
getchat().then(response => {
  chat_content.value = response.data
}).catch(error => {
  console.log(error)
  ElNotification({
    title: '获取聊天记录失败',
    message: error.message,
    type: 'error'
  })
})

// socket io
// const socket = io("http://localhost:13000")
const socket = io("https://socketio.qcblog.cc")
// socket连接
socket.on('connect', () => {
  console.log('connected success: ' + socket.id)
  ElNotification({
    title: '欢迎来到聊天室',
    message: '请友善发言哦',
    type: 'success'
  })
})
// socket收到消息
socket.on('receive-message', message => {
  chat_content.value.push(message)
})

// 清空输入框
const clear = () => textarea.value = ''
// 输入消息
const send = () => {
  const store = useStore()
  // 消息内容
  let msg = {
    id: uuidv4().substring(0, 8),
    userid: store.id,
    time: getCurrentTime(),
    content: textarea.value
  }
  // 本地显示消息
  chat_content.value.push(msg)
  // 广播消息
  socket.emit('send-message', msg)
  // 消息发送到服务器
  recordingChat(msg).then(response => {
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '消息记录失败',
      message: error.message,
      type: 'error'
    })
  })
  // 清空输入框
  textarea.value = ''
}
</script>

<style scoped>
.wrap {
  height: 100vh;
  width: 100vw;
}

.header-menu {
  height: 4.5rem;
  background-color: #4dcdef;
}

.container {
  height: calc(100% - 4.5rem);
  width: 90%;
  margin: 0 auto;
}

.header {
  text-align: center;
  line-height: 3rem;
  font-size: 2rem;
}

.aside {
  width: 15%;
}

.main {
  display: flex;
  flex-direction: column;
  border-radius: .25rem;
  box-shadow: var(--el-box-shadow);
}

.main>div {
  width: 100%;
}

.chat-space {
  height: 75%;
  max-height: 440px;
  overflow-y: auto;
}

.chat-space::-webkit-scrollbar {
  width: 5px;
}

.writing-space {
  height: 25%;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.writing-tools {
  height: 2rem;
  width: 100%;
  line-height: 2rem;
}

.writing-button {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>